<template>
    <el-upload
        class="upload-demo"
        :show-file-list="false"
        :http-request="bindImportExcel"
    >
        <template #trigger>
            <el-button type="primary">导入excel</el-button>
        </template>
    </el-upload>

    <!-- 显示导入表格 -->
    <div id="tabelexcel"></div>
</template>

<script setup>
import { excelImport } from '@/utils/xlsxutil'
const bindImportExcel = raw => {
    const file = raw.file //选中文件对象
    const tableExcelContainer = document.getElementById('tabelexcel')
    excelImport(file, tableExcelContainer)
}
</script>

<style lang="scss" scoped>
.upload-demo {
    .el-button {
        width: 80px;
        height: 20px;
        font-size: 12px;
    }
}

// 因为我们的innerhtml是后添加的，也就是vue编译的时候它没赶上，data-xxx
:deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
    td,
    th {
        min-height: 80px;
        height: 30px;
        border: 1px solid #cad9ea;
        color: #666;
    }
    thead th {
        background-color: #cce8eb;
        width: 100px;
    }
    tr:nth-child(odd) {
        background: #fff;
    }
    tr:nth-child(even) {
        background: #f5fafa;
    }
}
</style>
